<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="div">
    <select id="sel">
    <option value="">--请选择--</option>
    <option value="2">四川</option>
    <option value="5">湖南</option>
    <option value="9">湖北</option>
    </select>
</div>
    <script>
        var datas = {
            '2':[{t:'成都',id:11},{t:'绵阳',id:12}],
            '5':[{t:'长沙',id:13},{t:'株洲',id:14}],
            '9':[{t:'汉口',id:15},{t:'武昌',id:16}],
            '11':[{t:'锦江区',id:17},{t:'青白江区',id:18}],
            '17':[{t:'天府路',id:19},{t:'太升路',id:20}]
        }
        var sel = document.getElementById("sel");
        var div = document.getElementById("div");
        sel.onchange = function(){
            var data = datas[this.value];
            var next = this.nextElementSibling;
            if(!data){
                if(next&&next.nodeName=='SELECT'){
                    next.options.length = 1;
                    next.onchange();
                    next.parentNode.removeChild(next);
                }
                return;
            }
            if(!next){
                next = document.createElement('select');
                next.options.add(new Option('--请选择--',''));
                next.onchange = sel.onchange;
                div.appendChild(next);
            }else {
                next.options.length = 1;
            }
            for(var i=0;i<data.length;i++){
                next.options.add(new Option(data[i].t,data[i].id));
            }
        }
    </script>
</body>
</html>